<template>
    <div class="right-content">
        <right-header
            :audit="audit"
            :options="options"
            @exportLog="_exportOperateLog"
            @query="sendQuery"
        ></right-header>
        <right-table
            :requestList="queryResult.result"
            :audit="audit"
        ></right-table>
        <right-pagination
            @changeData="_getSearchList"
            :totalCount="queryResult.totalCount"
        ></right-pagination>
    </div>
</template>

<script>
import RightHeader from './right-header.vue'
import RightTable from './right-table.vue'
import RightPagination from './right-pagination.vue'

import { auditPlaceholder } from 'common/modul/audit.ts'

import { getOptions, getSearchList } from 'api/audit.ts'
import { userModule } from '@/store/modules/user'

export default {
    props: {
        audit: {
            type: Map,
            required: true
        }
    },
    data() {
        return {
            /** 用于请求 */
            queryData: {
                operator: '',
                operation: '',
                keyword: '',
                createTimeFrom: '',
                createTimeTo: ''
            }, // header中来的数据

            /** 每个audit的选择项 */
            options: {
                placeholder: auditPlaceholder[this.audit.get('auditType')], // 搜索栏的placeholder
                operators: [], // 操作人选项
                operations: [] // 操作选项
            },
            queryResult: [] // 包含着当前响应的数据和后续数据的信息
        }
    },
    async mounted() {
        await this._getOptions()
        await this._getSearchList({
            pageNo: 1,
            pageSize: 10
        })
    },
    methods: {
        /** 保存从header中来的数据，并发发送请求 */
        sendQuery(data) {
            this.queryData = data
            this._getSearchList({
                pageNo: 1,
                pageSize: 10
            })
        },

        /** _getOptions() 返回操作选项信息 */
        async _getOptions() {
            await getOptions({
                auditType: this.audit.get('auditType'),
                companyId: userModule.userCompany.id
            }).then(res => {
                this.options.operations = res.result.operations
                this.options.operators = res.result.operators

                // 为操作人添加全部选项
                if (this.options.operators.length > 0) {
                    this.options.operators.unshift({
                        accountId: '0000000000',
                        name: '全部'
                    })
                }
            })
        },

        /** 请求auditList列表信息 */
        async _getSearchList(data) {
            // 合并请求数据
            Object.assign(data, this.queryData, {
                auditType: this.audit.get('auditType'),
                companyId: userModule.userCompany.id
            })
            await getSearchList(data).then(res => {
                this.queryResult = res.result
            })
        },

        /** 导出日志
         * 还需要放入companyId、auditType参数
         */
        _exportOperateLog(data) {
            const href = `http://app153.qiyuesuo.net/system/audit/export?keyword=${
                data.keyword
            }&auditType=${this.audit.get('auditType')}&operator=${
                data.operator
            }&createTimeFrom=${data.createTimeFrom}&createTimeTo=${
                data.createTimeTo
            }&operation=${data.operation}&needAll=${data.needAll}&companyId=${
                userModule.userCompany.id
            }`
            window.open(href, '_blank')
        }
    },
    watch: {
        // 切换audit内容，保持选项正确响应
        audit(val) {
            this.options.placeholder = auditPlaceholder[val.get('auditType')]

            // 首先将请求参数置空
            Object.assign(this.$data.queryData, this.$options.data())
            this._getOptions()
            this._getSearchList(this.queryData)
        }
    },
    components: {
        RightHeader,
        RightTable,
        RightPagination
    }
}
</script>

<style lang="less" scoped>
.right-content {
    float: left;
    width: calc(100% - 160px);
    height: calc(100% - 25px);
    overflow: auto;
}
</style>
